<!--
 * @Author: your name
 * @Date: 2022-03-28 20:17:00
 * @LastEditTime: 2022-08-09 21:50:29
 * @LastEditors: xiaobaobeibai 604070135@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /admin-web/src/views/user_management/components/modal.vue
-->
<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="720px" :before-close="handleClose">
    <video v-show="index == 1" :src="src" controls autoplay style="width:100%;max-height:400px" />
    <iframe v-show="index == 2" :src="src" style="width:100%;height:600px;" frameborder="0" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('ruleForm')">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      src: '',
      title: '',
      index: '',
      dialogVisible: false
    }
  },
  methods: {
    open(e, index) {
      console.log(e)
      this.index = index
      if (index == 1) this.title = '播放视频'
      else this.title = '查看链接'
      this.src = e
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    resetForm(formName) {
      this.handleClose()
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
